<template>
  <div class="view-box" v-if="!pageLoading">
  <p class="title">{{trgNode}}关键业务环节数字化覆盖度表审批_{{reportCycle}}</p>
  <div>
    <div class="info-box">
      <div style="border-right:1px solid #eee; border-bottom: 1px solid #eee; ">
        业务单元：{{trgNode}}
      </div>
      <div style="border-bottom: 1px solid #eee; ">
        填报周期：{{reportCycle}}
      </div>
      <div style="border-right:1px solid #eee">
        提交人：{{pageInfo.submitterName}}
      </div>
      <div>
        提交时间：{{pageInfo.submitDate}}
      </div>
    </div>
  </div>
  <Tabs v-model="tabKey" class="tabs-app" >
    <template #extra>
        <el-tooltip class="item" effect="dark" placement="left-start">
          <div slot="content" class="table-tip-box">
            <p class="tip-title">标识说明:</p>
            <div class="table-tip-content">
              <div class="green-tip">
              </div>
              <div>
                <p>目标/现状表单元格：应用变化为建设完成</p>
                <p>目标/现状表行列：新增应用/组织</p>
                <p>计算表单元格：数值上升</p>
                <p>计算表行：新增应用</p>
              </div>
            </div>
            <div class="table-tip-content">
              <div class="red-tip">
              </div>
              <div>
                <p>目标/现状表单元格：应用变化为规划中/不涉及</p>
                <p>目标/现状表行列：减少应用/组织</p>
                <p>计算表单元格：数值下降</p>
                <p>计算表行：减少应用</p>
              </div>
            </div>
            <div class="table-tip-content">
              <div class="orange-tip">
              </div>
              <div>
                <p>计算表单元格：文本类描述变化</p>
              </div>
            </div>
          </div>
          <Icon class="legend-icon" type="ios-help-circle-outline"/>
        </el-tooltip>
    </template>
    <TabPane label="数字化覆盖率计算表" name="calculation" class="tab-pane">
      <coverDetail v-if="tabKey == 'calculation'"  tableType="rate" :showTip="false" :trgNode="trgNode" :showBtn="false" :rptType="rptType" :bindId="bindId" :reportCycle="reportCycle" :id="id"></coverDetail>
    </TabPane>
    <TabPane label="2022年数字化覆盖现状" name="present" class="tab-pane">
      <coverDetail v-if="tabKey == 'present'" tableType="status" :showTip="false" :trgNode="trgNode" :showBtn="false" :rptType="rptType" :bindId="bindId" :reportCycle="reportCycle" :id="id"></coverDetail>
    </TabPane>
    <TabPane label='“十四五”数字化覆盖目标' name="target" class="tab-pane">
      <coverDetail v-if="tabKey == 'target'" tableType="target" :showTip="false" :trgNode="trgNode" :showBtn="false" :rptType="rptType" :bindId="bindId" :reportCycle="reportCycle" :id="id"></coverDetail>
    </TabPane>
  </Tabs>
</div>
</template>

<script>
import coverDetail from '@/components/ListView/coverDetail'
import coverApi from '@/api/cover.js'
export default {
  name: 'statusAndRate',
  components: {
    coverDetail
  },
  data() {
    return {
      reportCycle: '',
      trgNode: '',
      rptType: '',
      bindId: '',
      id: '',
      pageLoading: true,
      pageInfo: {},
      tabKey: 'calculation'
    }
  },
  mounted() {
    let params = this.$route.params
    this.bindId = params.bindId || ''
    coverApi.gatTableInfo({bindId: this.bindId}).then(res=> {
      let info = res.data.data[0]
      this.pageInfo = info
      this.trgNode = info.trgNode
      this.rptType = info.rptType
      this.reportCycle = info.reportCycle
      this.pageLoading = false
    })
  }
}
</script>

<style lang="less" scoped>
.legend-icon {
  font-size: 24px;
  margin-top: 15px;
  margin-right: 10px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  padding: 4px;
}
.info-box {
  width: 100%;
  height: 72px;
  border: 1px solid #eee;
  margin-bottom: 10px;
  div {
    width: 50%;
    float: left;
    height: 36px;
    line-height: 24px;
    padding: 6px;

  }
}
.view-box  {
  display: flex;
  flex-direction: column;
  .tabs-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /deep/.ivu-tabs-content {
      flex: 1
    }
  }
}
</style>